<template>
	<view>
		<view class="head" :style="{ height: height + 'px', background:background}">
			<view 
			class="back"
			@click="back"
			v-if="backShow"
			:style="{ 
				top: top + 'px',
				color:color
			}">
			<slot></slot>
			</view>
			
			<view
			class="title"
			v-if="titleShow"
			:style="{
				top: top + 'px',
				color:color,
				'font-size': size + 'rpx'
			}">{{title}}</view>
		</view>
		<view class="" :style="{ height: height + 'px', background:background}">
			
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '自定义标题'
			},
			size:{
				type: Number,
				default: 32
			},
			color:{
				type: String,
				default: '#fff'
			},
			titleShow: {
				type: Boolean,
				default: true
			},
			backShow: {
				type: Boolean,
				default: true
			},
			background:{
				type: String,
				default: ""
			}
		},
		data() {
			return {
				height :0,
				top:0,
			}
		},
		created() {
			//设备信息
			let app = uni.getSystemInfoSync();
			console.log('设备信息',app)
			// #ifdef APP-PLUS
			this.top = app.safeArea.top
			this.height = 64 + app.safeAreaInsets.bottom
			//#endif
			
			// #ifdef MP-WEIXIN
			
				//胶囊信息
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				this.height  = app.statusBarHeight + menuButtonInfo.height + (menuButtonInfo.top - app.statusBarHeight)*2
				this.top = menuButtonInfo.top;
			//#endif
			
		},
		methods: {
			back(){
				console.log('点击头部返回')
				uni.navigateBack();
			}
		}
	}
</script>

<style>
.head{

	position: fixed;
	width: 750rpx;
	z-index: 999;
}
.title{
	position: fixed;
	width: 750rpx;
	text-align: center;
	line-height: 32px;
	height: 32px;
}
.back{
	padding-left: 40rpx;
	position: fixed;
	/* width: 81rpx; */
	text-align: center;
	/* line-height: 32px; */
	/* height: 32px; */
	font-size: 32rpx;
	/* font-weight: 900; */
	z-index: 9;
}
</style>
